<template>
  <div>
    <counter-result :result="result"/>
    <div>
      <counter-button
        innerText="+"
        action="PLUS"
        @dispatch="dispatch"
      />
      <counter-button 
        innerText="-" 
        action="MINUS"
        @dispatch="dispatch"
      />
    </div>
  </div>
</template>

<script>
import CounterResult from './Result.vue';
import CounterButton from './Button.vue';

// 派发器
import dispatch from '../../dispatchers/counter.js';

export default{
  name: 'Counter',
  components: {
    CounterResult,
    CounterButton
  },
  data() {
    return {
        result : 0
      }
  },
  methods: {
    dispatch(...args) {
      dispatch(this)(...args);
      }
    }
}
</script>

<style>

</style>
